<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 4 Assignment</title>
	<meta name="description" content="A really cool site!">
	<link rel="stylesheet" type="text/css" href="css4.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	<script type= "text/javascript">

	$(document).ready(function(){
	    $("#homedropdown").mouseenter(function(){
			$("#dropdown_container").slideDown();
		 	});
	    $("#dropdown_container").mouseleave(function(){
	    	$("#dropdown_container").slideUp();
	    });
	});

	</script>


	<style type= "text/css">
 


	 /*#homedropdown*/
/*	 { 
	 	background-color: white;
	 	width: 200px;
	 	padding: 10px;
	 	text-align: left;
	 }
*/
	 #dropdown_container {
	 	float: left;
	 	position: absolute;
	 	z-index: 2;
	 	background-color: red;
	 	border: 1px solid black;
	 	width: 100px;
	 	padding: 10px;
	 	text-align: left;
	 	display: none;
	 	
	 }
	 #dropdown_container div: hover {
	 	background-color: grey;
	 	padding-left: 40px;
	 }

	 </style>

</head>
<body>
	<div id="container">
		<!-- header section -->
		<div id="header">

			<img id= "logo" src="logo.png" alt = "this is the site logo"/>
		
			<p id= "toprighttollfree"> CALL TOLL FREE 1-800-772-5823</p>

		</div>
		


		<div id="topnav">`

			<ul class="menu">
				<li id= "homedropdown" ><a href=""> Home </a>

						<div id ="dropdown_container">
							<div class= "insidetext"><a href="#"> Home1</a></div>
							<div class= "insidetext"><a href="#"> Home2</a></div>
							<div class= "insidetext"><a href="#"> Home3</a></div>
							<div class= "insidetext"><a href="#"> Home4</a></div>
							<div class= "insidetext"><a href="#"> Home5</a></div>
						</div>

				</li>
				<li><a href=""> Market Segment </a></li>
				<li><a href="">Service</a></li>
				<li><a href=""> Products</a></li>
				<li><a href=""> Promotions</a></li>
				<li><a href=""> Market Area</a></li>
				<li><a href=""> Market Information </a></li>
			</ul>
		
			

		</div>

		<!-- <div class="clear"> </div> -->
	
		<div id="body">

			<div id="officeimage">
				<img src="office.png" alt="this is the office image" width =500/>
			</div>
			<div id="maintext">
				<h1 class="yellow">About PPC Lubricants</h1>
				<p></P>
				<h2 class="whitetext"> A Heritage if Specializing in Lubricant</h2>
				<p></p>
				<p class="whitetext"> orem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora .</P>
				<p></p>
				<p class="whitetext">orem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. tristique sem. Proin ut ligula vel nunc egestas  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque .</p>
			</div>
			<div class="clear"></div>

			<div id="logobutton">
				<a id="smalllogo" href="#"><img src="logo.png" alt="this is a button" width=65 height=20/></a>
				<p id="bulk"> PPC now has Bulk Delivery/Squirt Fill capability for DEF</p>
			</div>
			<div class="box">
				<p class="yellow"> AUTOMOTIVE</p>
				<img src = "auto.png" alt="an image here" width= 258>
				<p class="blacktext">Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. tristique sem. Proin ut ligula vel nunc egestas  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p>
			
				<div class="movebutton"><button type="button">LEARN MORE>>></button></div>
			</div>
			<div class="box">
				<p class="yellow"> AUTOMOTIVE</p>
				<img src = "auto.png" alt="an image here" width= 258>
				<p class="blacktext">Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. tristique sem. Proin ut ligula vel nunc egestas  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p>
				
				<div class="movebutton"><button type="button">LEARN MORE>>></button></div>
			</div>
			<div class="box">
				<p class="yellow"> AUTOMOTIVE</p>
				<img src = "auto.png" alt="an image here" width= 258>
				<p class="blacktext">Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. tristique sem. Proin ut ligula vel nunc egestas  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p>
				
				<div class="movebutton"><button type="button">LEARN MORE>>></button></div>
			</div>
			<div class="box">
				<p class="yellow"> AUTOMOTIVE</p>
				<img src = "auto.png" alt="an image here" width= 258>
				<p class="blacktext">Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. tristique sem. Proin ut ligula vel nunc egestas  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.<p>
				<div class="movebutton"><button type="button">LEARN MORE>>></button></div>
			</div>
		</div>





	</div>
</body>
</html>